<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="component/pageHead.jsp"%>
<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <base href="<%=basePath%>"/>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Parlo - eCommerce Bootstrap 4 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    <!-- CSS	============================================ --><!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"><!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/icons.min.css"><!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins.css"><!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css"><!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- vue.js -->
    <script src="assets/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="wrapper">
    <jsp:include page="component/head.jsp"></jsp:include>
    <div class="breadcrumb-area pt-35 pb-35 bg-gray">
        <div class="container">
            <div class="breadcrumb-content text-center">
                <ul>
                    <li><a href="index.jsp">主页</a></li>
                    <li class="active">登录与注册</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="login-register-area pt-100 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-12 ml-auto mr-auto">
                    <div class="login-register-wrapper">
                        <div class="login-register-tab-list nav"><a class="active" data-toggle="tab" href="#lg1"><h4>
                            登录账户</h4></a><a data-toggle="tab" href="#lg2"><h4>注册账户</h4></a></div>
                        <c:if test="${flag==true}">
                            <div v-show="success_show" class="alert alert-success alert-dismissable">
                                <button  type="button" class="close" data-dismiss="alert"
                                         aria-hidden="true">
                                    &times;
                                </button>
                                注册成功！请登录
                            </div>
                        </c:if>
                        <div class="tab-content">
                            <div id="lg1" class="tab-pane active">
                                <div class="login-form-container">
                                    <div class="login-register-form">
                                        <c:if test="${flag==false}"><span style="color: red">用户名或密码错误</span></c:if>
                                        <form action="${path}/user/login" method="post"><input type="text" name="username"
                                                                              placeholder="Username"><input
                                                type="password" name="password" placeholder="Password">
                                            <div class="button-box">
                                                <div class="login-toggle-btn"><input
                                                        type="checkbox"><label>记住我</label><a href="#">忘记密码？</a></div>
                                                <button type="submit">登录</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>


                            <div id="lg2" class="tab-pane" >
                                <div class="login-form-container" id="register_form">
                                    <div class="login-register-form">

                                        <form action="${path}/user/register" method="post">
                                            <label style="color: red">{{checkInfo}}</label>
                                            <input type="text"  name="username" v-model="username" @blur="check_username" placeholder="Username"><br>
                                            <input type="password" name="password" v-model="password" placeholder="Password">
                                            <div class="button-box">
                                                <button  id="register_but" :disabled="flag" >注册</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer-area bg-paleturquoise">
        <div class="container">
            <div class="footer-top text-center pt-45 pb-45">
                <nav>
                    <ul>
                        <li><a href="index.jsp">主页 </a></li>
                        <li><a href="shop.jsp">商城 </a></li>
                        <li><a href="contact-us.jsp">意见与建议 </a></li>
                    </ul>
                </nav>
            </div>
        </div>


        <div class="footer-bottom border-top-1 pt-20">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-5 col-12">
                        <div class="footer-social pb-20"><a href="#">Facebok</a><a href="#">Twitter</a>
                            <a href="#">Linkedin</a><a href="#">Instagram</a></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="copyright text-center pb-20"><p>Copyright Â© All Right <a
                                href="http://www.bootstrapmb.com/" title="bootstrapmb">Reserved</a></p></div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-12">
                        <div class="payment-mathod pb-20"><a href="#"><img src="assets/img/icon-img/payment.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div><!-- All JS is here============================================ --><!-- jQuery JS -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script><!-- Popper JS -->
<script src="assets/js/popper.min.js"></script><!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script><!-- Plugins JS -->
<script src="assets/js/plugins.js"></script><!-- Ajax Mail -->
<script src="assets/js/ajax-mail.js"></script><!-- Main JS -->

<script src="assets/js/main.js"></script>
<script src="js/login-register.js"></script>
</body>
</html>